@extends("ogreencard.layout.layout")
@section("h1","订单")
@section("h2","选择产品")
@section("content")
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" lay-filter="checkall" name="" data-name="" lay-skin="primary">
                                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                            <i class="layui-icon layui-icon-ok"></i>
                                        </div>
                                    </th>
                                    <th>套餐名称</th>
                                    <th>兑换积分</th>
                                    <th>套餐价值</th>
                                    <th>详细内容</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cardTypes as $type)
                                    <tr>
                                        <td>
                                            <input type="checkbox"
                                                   value="{{$type->pack_id}}"
                                                   lay-skin="primary"
                                                   data-name="{{$type->pack_name}}"
                                                   data-price="{{$type->pack_price}}"
                                                   id="goods{{$type->pack_id}}"
                                            >

                                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                                <i class="layui-icon layui-icon-ok"></i>
                                            </div>
                                        </td>
                                        <td>{{$type->pack_name}}</td>
                                        <td>{{$type->pack_price}}</td>
                                        <td>{{$type->pack_money}}</td>
                                        <td>{!! str_replace("\n","<br>",$type->pack_content) !!}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="layui-form-item" style="text-align: center;">
                            <br>
                            <button class="layui-btn" onclick="check_ok();">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function get_goods(){
            var goods = localStorage.getItem("goods");
            if(!goods) {
                goods = new Array();
            }else{
                goods = JSON.parse(goods);
            }
            return goods;
        }

        layui.use(['laydate','form','upload'], function(){
            var laydate = layui.laydate;
            var  form = layui.form;
            var upload = layui.upload;

            var $ = layui.jquery;
            // 监听全选
            form.on('checkbox(checkall)', function(data){

                if(data.elem.checked){
                    $('tbody input').prop('checked',true);
                }else{
                    $('tbody input').prop('checked',false);
                }
                form.render('checkbox');
            });

            var goods = get_goods();
            for(var g of goods){

                $("#goods"+g.id).prop("checked",true);
                $("#goods"+g.id+" +div").eq(0).addClass("layui-form-checked");
            }
        });


        function check_ok(){
            var historyGoods = get_goods();
            var goods = new Array();
            $("input[type=checkbox]:checked").each(function(d)
            {
                var ele = $(this);
                if(ele.data('name') == '') return true;
                num = 1;
                for(var g of historyGoods){

                    if(g.id == ele.val()){
                        num = g.num;
                    }
                }
                goods.push({
                    name:ele.data("name"),
                    price:ele.data("price"),
                    id:ele.val(),
                    num:num
                })
            })

            parent.receive_data(goods);
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
        }
    </script>
@endsection
